<meta charset="UTF-8">
  <div class="content-wrapper">
    <section class="content-header">
      <h1 style="text-align:center">
        	消费记录
      </h1>
    </section>
    <section class="content" style='position: relative;'> 
         <div class="panel-body" style="padding-bottom:0px;">
						<div class="row searchdiv">
							
								<div class="form-group col-lg-2 col-xs-6 space" style='display: inline-block;width: 100px;vertical-align: middle;'>
									<input class="form-control" type="text" placeholder="请输入卡号 " ng-model="cardInfor" ><!--value='vid200000000001'-->
								</div>
								<div class="form-group col-lg-2 col-xs-6 space" style='display: inline-block;width: 100px;vertical-align: middle;'>
									<input class="form-control" type="text" placeholder="请输入姓名 " ng-model="myName" >
								</div>
								<!-- 卡类型-->
							 <div class="form-group col-lg-2 col-xs-6 space" style='display: inline-block;width: auto;vertical-align: middle;'>
									 <select class="form-control" ng-model="cardKindId" ng-options='type.id as type.name for type in cardTypes'>
			            </select>
								</div>
							<div class='col-md-3'>
							 	<input type="text" class="form-control pull-right" id="reservation" ng-model="searchDate" style='text-align: center;'>
							 </div>
							<div class="form-group col-lg-2 col-xs-6 space" >
                    <button type="submit" class="btn btn-default" style='padding: 6px 12px;' ng-click='search()'>
                    	<i class="fa fa-search"> 查询</i>
                    </button>
                </div>
							
								
			     			 <button style='margin-right: 3%;' class="btn pull-right" ng-click="download('mealCardTableExport','饭卡审计')"><i class="fa fa-cloud-download"></i>&nbsp;&nbsp;导出</button>
			   </div>
			   
			<!--表格-->
			<div class="box" >
            <div class="box-body">
              <div  class="dataTables_wrapper form-inline dt-bootstrap"><div class="row"><div class="col-sm-6"></div><div class="col-sm-6"></div></div><div class="row"><div class="col-sm-12">
              	<table id='mealCardTable' style='width: 100%; position: relative;overflow: auto;height:450px; display: block;background: #ffffff;'  class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
	                <thead style='display: inline-table;width: 100%;'>
		                <tr role="row">
		                	<th    style="width: 25%;">卡号</th>
		                	<th  style="width: 12%;">姓名</th>
		                	<th   style="width: 15%;">卡类型</th>
		                	<th  style="width: 12%;">消费金额</th>
		                	<th   style="width: 15%;">操作时间</th>
		                </tr>
	                </thead>
	              <tbody style='display: inline-table;width: 100%;'>
			                <tr style='position: relative;width: 100%;display: inline-table;' ng-class="{even:!$even, odd:!$odd}" ng-repeat="meal in items">
				                  <td style="width: 25%;">{{meal.cardChipNo}}</td>	
				                  <td style="width: 12%;" >{{meal.userName}}</td>
				                  <td style="width: 15%;">{{meal.cardTypeName}}</td>
				                  <td style="width: 12%;">{{meal.value}}</td>
				                  <td style="width: 15%;">{{meal.createFmt}}</td>
			                </tr>
	                </tbody>
	                <tfoot>
	                </tfoot>
              </table>
              <table id='mealCardTableExport' style='z-index:-100;width: 100%; position: fixed;overflow: scroll;height:450px; display: block;background: #ffffff;' 
              	 class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
	                <thead style='display: inline-table;width: 100%;'>
		                <tr role="row">
		                	<th    style="width: 10%;">卡号</th>
		                	<th  style="width: 12%;">姓名</th>
		                	<!--<th   style="width: 15%;">手机号</th>-->
		                	<th  style="width: 12%;">消费金额</th>
		                	<th   style="width: 15%;">最近一次操作时间</th>
		                </tr>
	                </thead>
	              <tbody style='display: inline-table;width: 100%;'>
			                <tr style='position: relative;width: 100%;display: inline-table;' ng-class="{even:!$even, odd:!$odd}" ng-repeat="meal in data">
				                  <td style="width: 10%;">{{meal.mealcard_name}}</td>	
				                  <td style="width: 12%;" >{{meal.mealcard_no}}</td>
				                  <!--<td style="width: 15%;">{{meal.mealcard_mobile}}</td>-->
				                  <td style="width: 12%;">{{meal.mealcard_balance}}</td>
				                  <td style="width: 15%;">{{meal.mealcard_lastTime}}</td>
			                </tr>
	                </tbody>
	                <tfoot>
	                </tfoot>
              </table>
              </div>
              </div>
              <div class="row" style="margin-bottom:10px;">
              	<div class="col-sm-3">
              		<div class="dataTables_info" id="example1_info" role="status" aria-live="polite">总条目数：{{totalNums}}</div>
              	</div>
                <div class="col-sm-9">
                	<div class="dataTables_paginate paging_simple_numbers row" id="example1_paginate">
                		<label style="font-weight:normal;float:left;padding-right:15px;">每页显示数目 
                			<input  readonly  class="form-control input-sm" style='border: none;width: 60px;background-color: #FFFFff !important;' ng-model="initial"/>
                			<!--<select name="example1_length" aria-controls="example1" class="form-control input-sm" ng-change="change(initial)" ng-model="initial" > 
                				<option value="10">10</option> 
                				<option value="25">25</option>
                				<option value="50">50</option>
                				<option value="100">100</option>
                			</select>-->
                		</label>
                		<ul class="pagination col-lg-7" style='cursor: pointer;'>
                			<li class="paginate_button previous " id="example1_previous" >
                				<a  ng-click="Previous2()">上一页</a>
                			</li>
                			<li   ng-repeat="page in pageList" ng-class="{active: isActivePage2(page)}"><!-- class=" paginate_button active" -->
                				<a  ng-click="selectPage2(page)">{{page}}</a>
                			</li>
                			<li class="paginate_button next" id="example1_next">
                				<a  ng-click="Next2()">下一页</a>
                			</li>
                		</ul>
                	</div>
                </div>
              </div>
              </div>
            </div>
      </div>
	</section>
</div>
<!-- 选择饭卡modal -->
<div class="modal fade" id="selectMealCard" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="text-align:center" >选择员工</h4>
      </div>
      
      
     <!--表格-->
			<div class="box" style='width: 94%;  display: inline-block;'>
            <div class="box-body">
              <div  class="dataTables_wrapper form-inline dt-bootstrap"><div class="row"><div class="col-sm-6"></div><div class="col-sm-6"></div></div><div class="row"><div class="col-sm-12">
              	<table style='width: 100%; position: relative;overflow: scroll; display: block;background: #ffffff;height:440px' id="example1" 
              		class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info"><!--min-height: 300px; max-height: 500px;-->
                <thead style='display: inline-table;width: 100%;'>
	                <tr role="row">
	                	<th  style="width: 8%;" >卡号</th>
	                	<th  style="width: 10%;">类型</th>
	                	<th  style="width: 12%;">姓名</th>
	                	<th  style="width: 12%;">当前金额</th>
	                </tr>
                </thead>
              <tbody id='selectMealCard' style='display: inline-table;width: 100%;' >
		                <tr ng-click="mealCardSelected($event)" style='position: relative;width: 100%;display: inline-table;' ng-class="{even:!$even, odd:!$odd}" ng-repeat="melCard in mealCardInfors">
			                  <td style="width: 8%;" >{{melCard.mealCard_no}}</td> 
			                  <td style="width: 10%;">{{melCard.mealCard_type}}</td>
			                  <td style="width: 12%;">{{melCard.mealCard_username}}</td>
			                  <td style="width: 12%;">{{melCard.mealCard_currentmoney}}</td>
		                </tr>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
              </div>
              </div>
              </div>
            </div>
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-lg pull-left" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-success btn-lg" ng-click="trueSelectMealCard()">确定</button>
      </div>
    </div>
  </div>
</div>

<style>
	.space{
		padding-left:2px;
		padding-right:2px;
	}
	.box{
		border-top:1px solid #d2d6de;
	}
	.pagination{
		margin:0;
	}
	.odd{background-color: #f9f9f9 !important;}
	.even{background-color: transparent !important;}
	.btn{    padding: 10px 12px;}
</style>
<script>
					$(document).ready(function() {
							
//							$('#table_example').hide();
  							//$('#example').dataTable();
					} );
					
				
	
</script>